<template>
  <el-dialog
    destroy-on-close
    append-to-body
    :visible.sync="show"
    width="1000px"
    :before-close="cancel">
    <template #title>
      <section class="d-title">
        <div>{{ $t('供应商库存') }}</div>
        <div>{{ formData.skuNo }}</div>
        <div></div>
      </section>
    </template>
    <p style="font-size: 16px">{{ title }}</p>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        <!-- 关闭 -->
        {{ $t('关闭') }}
      </el-button>
    </div>
    <el-divider></el-divider>
    <div id="numChart" style="width: 100%; height: 500px"></div>
  </el-dialog>
</template>

<script>
import { getStockSource } from '@/api/distribution/sku/shopSkuPair'
import * as echarts from 'echarts'

export default {
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: '',
      detail: {},
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  methods: {
    /** 初始化图表 */
    drawEcharts(data) {
      const _data = data.map((item) => {
        return {
          value: item.value,
          name: item.name,
          labelLine: { show: true },
          label: { show: true },
        }
      })
      var chartDom = document.getElementById('numChart')
      this.myChart = echarts.init(chartDom)

      let tatalSale = 0
      data.map((i) => {
        tatalSale += +i.value || 0
      })
      var option = {
        title: {
          text: `卖家持有总库存:\n\n${tatalSale}`,
          left: 'center',
          top: 'center',
        },
        // color: _data.map((i, index) => this.$randomColor(index + 1)),
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          textStyle: {
            fontSize: 13,
            fontWeight: 600,
          },
          formatter: function (name) {
            let legend = ''
            _data.map((i) => {
              if (i.name == name) {
                legend = `${name}:${i.value}`
              }
            })
            return legend
          },
        },

        series: [
          {
            type: 'pie',
            radius: ['40%', '85%'],
            itemStyle: {
              borderRadius: 5,
            },
            selectedMode: 'single',
            data: _data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
            label: {
              normal: {
                formatter: function (e) {
                  let data = e.data
                  if (data.value == 0) {
                    data.labelLine.show = false
                    data.label.show = false
                  } else {
                    return `${data.name}:${e.value}`
                  }
                },
              },
            },
          },
        ],
      }

      option && this.myChart.setOption(option)
    },
    getList() {
      getStockSource({ id: this.formData.id }).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          const { reserveStock, cloudStock, sellerTotalStock, sellerUnOutStock, stock } = data
          this.detail = { ...data }
          this.title = `供应商库存(${stock}) = 预留库存(${reserveStock}) + 云库存(${cloudStock}) + 卖家持有总库存(${sellerTotalStock}) + 卖家未出货总库存(${sellerUnOutStock})`
          this.$nextTick(() => {
            this.drawEcharts(res.data.statisticsSellerStock)
          })
        }
      })
    },
    handleSubmit() {},
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-descriptions-item__cell {
  width: 50%;
}
.d-title {
  width: calc(100% - 50px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  div {
    &:nth-child(2) {
      font-weight: bold;
      font-size: 18px;
    }
  }
}
</style>
